<template>
  <div>
    <button @click="comName = 'QrCode'">二维码登录</button>
    <button @click="comName = 'UserLogin'">账号密码登录</button>
    <button @click="comName = 'PhoneLogin'">验证码登录</button>

    <!-- 一个项目里不要过多的缓存组件，因为浪费性能占内存 -->
    <!-- 要确保确实需要缓存才缓存 -->
    <!-- <keep-alive> -->

      <!-- 仅仅只缓存名字叫userLogin的组件 -->
      <!-- 如果要缓存多个就逗号隔开 -->
    <!-- <keep-alive include="UserLogin"> -->

      <!-- 除了PhoneLogin不缓存，其他都缓存 -->
    <keep-alive exclude="PhoneLogin">
      <!-- 组件要是不见了，其实就是销毁了 -->
      <component :is="comName"></component>
    </keep-alive>



    <!-- component内部的原理相当于是v-if  -->
    <!-- <qr-code v-if="comName === 'QrCode'"></qr-code>
     <user-login v-else-if="comName === 'UserLogin'"></user-login>
     <phone-login v-else-if="comName==='PhoneLogin'"></phone-login> -->
  </div>
</template>

<script>
import QrCode from './components/QrCode.vue'
import UserLogin from './components/UserLogin.vue'
import PhoneLogin from './components/PhoneLogin.vue'
export default {
  components: {
    QrCode,
    UserLogin,
    PhoneLogin
  },
  data () {
    return {
      comName: 'QrCode'
    }
  }
}
</script>

<style></style>
